<template>
  <card-component
    :content-title="contentTitle"
    :tv="showTv"
    :showClock="showClock"
    :page="page"
    @handleSizeChange="handleSizeChange"
    @handleCurrentChange="handleCurrentChange">


    <table-component
      slot="table"
      :table-header="tableHeader"
      :table-data="tableData"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
    ></table-component>


  </card-component>

</template>

<script>


  import card from '@/base/card.vue'
  import table from '@/base/AutoWidthTable.vue'
  import lineStatusAction from '@/base/lineStatusAction.vue'
  import request from '@/common/js/request'
  import util from '@/common/js/util'

  export default {
    data() {
      return {
//        chanxian: '',
        contentTitle:this.$getTextByLangKey('生产信息汇总'),

        nowProduce: {},
        waitProduce: {},

        tableHeader: [],
        tableData: [],

        page: null,

        showClock: false,
        showTv: false,


        //        这是实现自动刷新功能的
        timer: '',
        isRequesting: false
      }
    },
    created: function () {

      this.fetchData()
    },

    destroyed:function () {
      this.stopTimer()
      console.log('---- destroyed ----')
    },


    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route': 'fetchData'
    },

    methods: {

      getTimeToDate: function (time) {

        if (time != null) {
          var date = new Date(time).format("yyyy/MM/dd hh:mm")
          return date
        }
        return ''
      },
      fetchData: function () {
//        this.chanxian = this.$route.query.chanxian
//        this.contentTitle = this.chanxian + '每小时生产状况'

        this.stopTimer()

        let path = this.$route.path
        if (path.startsWith('/wrapper')) {
          this.showTv = true
          this.showClock = false
        } else {

          this.showTv = false
          this.showClock = true
        }

        this.creatTimer()

      },

      creatTimer:function () {
        this.autoRequest()
        this.timer = setInterval(()=>{
          if(!this.isRequesting){
//            console.log('开始自动请求')
            this.autoRequest()
          }else{
//            console.log('请求结果未返回')
          }
        },5000)
      },
      stopTimer:function () {
        clearTimeout(this.timer)
        this.isRequesting = false
      },


      autoRequest:function () {
        this.isRequesting = true

        console.log('请求产线列表生产信息')
        request.requestLineBoard(res => {
          this.isRequesting = false
          console.log(res)
          let list = res.data.data.list
          let header = res.data.data.header
          let boardHeader = [{type: 'index', isShow: true, width: '65', label: 'NO.'}]
          let tableData = []
          header.forEach(item => {
            if (item.prop === 'lineName') {
              item.isShow = true
              item.type = 'link'
            } else {
              item.isShow = true
            }

            boardHeader.push(item)
          })
          list.forEach(item => {
            item.lineName_link = "./#/wrapper/lineStatus?chanxian=" + item.lineName;
            item.startTime = this.getTimeToDate(item.startTime)
            item.finalTime = this.getTimeToDate(item.finalTime)
            item.estimateFinishTime = this.getTimeToDate(item.estimateFinishTime)
            item.estimateStartTime = this.getTimeToDate(item.estimateStartTime)
            tableData.push(item)
          })

          this.tableHeader = boardHeader
          this.tableData = tableData
        },res=>{
          this.isRequesting = false
        })


      },

      handleEdit: function (index, row) {
        console.log(index)
        console.log(row)
        this.$emit('handleEdit', index, row)
      },
      handleDelete: function (index, row) {
        this.$emit('handleDelete', index, row)
      },
      rowClick: function (row, event, column) {
      },
      handleSizeChange: function (val) {
        this.$emit("handleSizeChange", val)
      },

      handleCurrentChange: function (val) {
//        console.log('sbsbsbsb')
        this.page.currentPage = val
//        this.fetchData()
      },

      creatDialog: function () {
        console.log('dddd')
        this.dialogVisible = true;

      },
      cancelDialog: function () {
        this.dialogVisible = false;
      },
      confrimDialog: function () {
        this.dialogVisible = false;
        this.$emit('confrimDialog', this.excelForm)
      },
      updateNowProduce: function (val) {
        this.nowProduce = val
      },

      updateWaitProduce: function (val) {
        this.waitProduce = val
      },
    },
    components: {
      'card-component': card,
      'table-component': table,
      'action-componet': lineStatusAction
    },

  }
</script>


<style scoped lang="stylus">
  .el-card {
    box-shadow: 0 0;
    border-radius: 0;
    border: none;
    width 100%
    box-sizing border-box
  }

</style>


